<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form :inline="true" :model="dataForm">
        <el-form-item label="分类">
          <Cascader :catelogPath="catelogPath" />
        </el-form-item>
        <el-form-item label="品牌">
          <Select style="width: 160px" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number
            style="width: 160px"
            v-model="dataForm.price.min"
            :min="0"
          ></el-input-number>
          -
          <el-input-number
            style="width: 160px"
            v-model="dataForm.price.max"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="检索">
          <el-input
            style="width: 160px"
            v-model="dataForm.key"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSkuInfo">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%"
      @expand-change="getSkuDetails"
    >
      <el-table-column type="expand">
        <template #default="scope">
          商品标题：{{ scope.row.skuTitle }}
          <br />
          商品副标题：{{ scope.row.skuSubtitle }}
          <br />
          商品描述：{{ scope.row.skuDesc }}
          <br />
          分类ID：{{ scope.row.catelogId }}
          <br />
          SpuID：{{ scope.row.spuId }}
          <br />
          品牌ID：{{ scope.row.brandId }}
          <br />
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="skuId"
        header-align="center"
        align="center"
        label="skuId"
      ></el-table-column>
      <el-table-column
        prop="skuName"
        header-align="center"
        align="center"
        label="名称"
      ></el-table-column>
      <el-table-column
        prop="skuDefaultImg"
        header-align="center"
        align="center"
        label="默认图片"
      >
        <template #default="scope">
          <img
            :src="scope.row.skuDefaultImg"
            style="width: 80px; height: 80px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="价格"
      ></el-table-column>
      <el-table-column
        prop="saleCount"
        header-align="center"
        align="center"
        label="销量"
      ></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="233"
        label="操作"
      >
        <template #default="scope">
          <el-button size="small">预览</el-button>
          <el-button size="small">评论</el-button>
          <el-dropdown
            @command="handleCommand(scope.row, $event)"
            size="small"
            split-button
            style="margin: 1px 0 0 12px"
          >
            更多
            <template #dropdown>
              <el-dropdown-item command="uploadImages">
                上传图片
              </el-dropdown-item>
              <el-dropdown-item command="seckillSettings">
                参与秒杀
              </el-dropdown-item>
              <el-dropdown-item command="reductionSettings">
                满减设置
              </el-dropdown-item>
              <el-dropdown-item command="discountSettings">
                折扣设置
              </el-dropdown-item>
              <el-dropdown-item command="memberPriceSettings">
                会员价格
              </el-dropdown-item>
              <el-dropdown-item command="stockSettings">
                库存管理
              </el-dropdown-item>
              <el-dropdown-item command="couponSettings">
                优惠劵
              </el-dropdown-item>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script lang="ts" setup>
import Cascader from '@/views/common/cascader.vue'
import Select from '@/views/common/select.vue'
import { ref, onMounted, watch } from 'vue'
import catBrandStore from '@/store/modules/spu.ts'
import { storeToRefs } from 'pinia'
import { reqSkuInfoList } from '@/api/product/spu'
import { useRouter } from 'vue-router'

const catPtahStore = catBrandStore()
const { catPath, brandId } = storeToRefs(catPtahStore)
const dataForm = ref<{
  key: string
  brandId: number
  catelogId: number
  price: {
    min: number
    max: number
  }
}>({
  key: '',
  brandId: 0,
  catelogId: 0,
  price: {
    min: 0,
    max: 0,
  },
})
const dataList = ref([])
const pageIndex = ref(1)
const pageSize = ref(10)
const totalPage = ref(0)
const dataListLoading = ref(false)
const dataListSelections = ref([])
const catelogPath = ref([])
const router = useRouter()

watch(brandId, (newBrandId: any) => {
  if (dataForm.value.catelogId === 0) {
    dataForm.value.brandId = 0
  }
  dataForm.value.brandId = newBrandId
})

watch(catPath, (newCatPath) => {
  if (newCatPath && newCatPath.length > 0) {
    dataForm.value.catelogId = newCatPath[newCatPath.length - 1]
  } else {
    dataForm.value.catelogId = 0
    dataForm.value.brandId = 0
  }
})

const getDataList = async () => {
  dataListLoading.value = true
  try {
    const response = await reqSkuInfoList(
      dataForm.value.catelogId,
      dataForm.value.brandId,
      pageIndex.value,
      pageSize.value,
      dataForm.value.key,
      dataForm.value.price.min,
      dataForm.value.price.max,
    )
    if (response && response.code === 0) {
      dataList.value = response.page.list
      totalPage.value = response.page.totalCount
    } else {
      dataList.value = []
      totalPage.value = 0
    }
    dataListLoading.value = false
  } catch (error) {}
}

const searchSkuInfo = () => {
  getDataList()
}

// 处理更多指令
const handleCommand = (row: any, command: any) => {
  if (command === 'stockSettings') {
    router.push({
      path: '/sku',
      query: { skuId: row.skuId },
    })
  }
}

const getSkuDetails = (row: any, expand: any) => {
  // sku详情查询
  console.log('展开某行...', row, expand)
}

// 多选
const selectionChangeHandle = (val: any) => {
  dataListSelections.value = val
}

// 每页数
const sizeChangeHandle = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

// 当前页
const currentChangeHandle = (val: number) => {
  pageIndex.value = val
  getDataList()
}

onMounted(() => {
  getDataList()
})
</script>
<style lang="scss"></style>
